<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//需求：根据已有的json数据，编写菜单功能，
			//菜单中的菜品和分类都必须是json中的数据，点击不同的菜品分类可以显示与隐藏
			$(function() {
				$.getJSON("js/zuoye.json", function(value) {
					var oneUlLi = value[0].length; //一级菜单ul的li数量
					var ulAll = value.length; //总的ul数
					var caidangAllLi = ""; //菜单的各个li
					var caidang2Li = ""; //二级菜单的li
					//隐藏二级菜单
					$("#div2 ul").hide();
					//添加元素
					for(var i = 0; i < oneUlLi; i++) {
						for(var j = 0; j < ulAll; j++) {
							var caidangLi = "#caidan" + (j + 1) + " li:eq(" + i + ")";
							$(caidangLi).append(value[j][i]);
						}
						//显示二级菜单
						$("#caidan1 li").click(function(e) {
							caidang2Li="#div2 ul:eq(" + $(this).index() + ")";
							$("#div2 ul").hide();
							$(caidang2Li).show();
						});
					}
				});
			});

			//给li赋值
		</script>

		<style type="text/css">
			ul,
			li {
				list-style-type: footnotes;
				list-style:none;
			}
		</style>
	</head>

	<body>
		<div>
			<div id="div1">
				<ul id="caidan1">
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div id="div2">
					<ul id="caidan2">
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<ul id="caidan3">
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<ul id="caidan4">
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>

		</div>
	</body>

</html>